/*
jsx组件


*/

const ButtonCounter = {
	name: "ButtonCounter",
	props:["count"],
	methods:{
		onClick(){
			this.$emit("change",this.count+1);
		}
	},
	render(){
		return (
			<button onClick={this.onClick}>你点击{this.count}次</button>
		)
	}
}

export default{
	name: "ButtonCounterContainer",
	data(){
		return {
			count:0
		}
	},
	methods:{
		onChange(val){
			this.count = val;
		}
	},
	render(){
		const {count,onChange}=this;
		return (
			<div>
				<ButtonCounter
					style={{ marginTop:"10px" }}
					count={count}
					type="button"
					onChange={onChange}
				/>
				<br/>
				<h1>{this.$slots.default}</h1>
				<ButtonCounter
					style={{marginTop:"10px"}}
					count={count}
					type="button"
					domPropsInnerHTML={`hello ${this.count}.`}
					onChange={onChange}
				/>
			</div>
		)
	}
}